.activity-box {
  background-color: aliceblue;
  margin: 60px auto;
  width: 654px;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  form {
    background-color: white;
    height: 100%;
    border: 2px solid rgba(223, 226, 229);
    border-radius: 4px;
    padding: 30px;
    box-sizing: border-box;
    input[type='text'],
    .activity-city {
      border-radius: 6px;
      height: 38px;
      outline: none;
      border: 2px solid #dadde1;
      padding-left: 16px;
    }
    div {
      margin: 20px 0;
      display: flex;
      align-items: center;
      label:nth-of-type(1) {
        display: inline-block;
        width: 160px;
        text-align: right;
        margin-right: 16px;
        color: #606266;
      }
    }
    .form-submit {
      justify-content: center;
      button {
        width: 70px;
        height: 40px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        margin: 0 10px;
        cursor: pointer;
      }
      .submit {
        background-color: #4099f4;
        color: white;
      }
      .reset {
        border: 1px solid #d7dadf;
        background-color: white;
        color: #606266;
      }
    }
    .activity-name {
      flex: 1;
    }
    .activity-city {
      width: 40%;
    }
    .activity-date {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      input {
        width: 40%;
        border-radius: 6px;
        height: 38px;
        outline: none;
        border: 2px solid #dadde1;
        padding-left: 16px;
      }
    }
    .type {
      text-align: left;
      align-items: flex-start;
    }
    .activity-type {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      label {
        width: auto !important;
        margin-right: 30px !important;
        cursor: pointer;
        input {
          margin-right: 8px;
          border: 1px solid #dadde1;
        }
      }
    }
    .activity-sponsor {
      label {
        width: auto !important;
        margin-right: 30px !important;
        cursor: pointer;
        input {
          margin-right: 8px;
        }
      }
    }
    .activity-dcbe {
      flex: 1;
      border: 2px solid #dadde1;
      border-radius: 6px;
      outline: none;
      padding: 10px;
      box-sizing: border-box;
      resize: none;
    }
    .describe {
      align-items: flex-start;
      label {
        margin-top: 10px;
      }
    }
    .switch {
      width: 50px;
      height: 26px;
      border-radius: 30px;
      display: flex;
      align-items: center;
      padding: 0 4px;
      box-sizing: border-box;
      cursor: pointer;
      span {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
      }
    }
    .open {
      background-color: #4099f4;
      span {
        animation-name: switch-open;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
      }
    }
    .close {
      background-color: red;
      span {
        animation-name: switch-close;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
      }
    }
    @keyframes switch-open {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(100%);
      }
    }
    @keyframes switch-close {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }
  }
}
.isrequired {
  color: red !important;
  margin-right: 4px;
}